// 品牌详情
import React, { useEffect, useState } from 'react';
import Taro, { useDidShow, useRouter } from '@tarojs/taro';
import { AtAccordion, AtList } from 'taro-ui';
import { View, Image, Text } from '@tarojs/components';
import TitleBar from '@/src/components/titleBar';
import './index.less';
import store from '@/src/store';
import LoadingSpinner from '@/src/components/loadingSpinner';
import { seriesListFun } from '@/src/common/method/wikiFun';
import { observer } from 'mobx-react-lite';
import BrandItem from '@/src/components/brandItem';
import { getNetWorkStatus } from '@/src/common/util/util';
import { netWorkErrorInfo } from '@/src/utils/constants';
interface RouteParams {
  brandId: string;
  [key: string]: string | undefined;
}
const BrandDetail = () => {
  const { params } = useRouter<RouteParams>();
  const [open, setOpen] = useState<string>('0');
  const [loadingText, setLoadingText] = useState('加载中');
  const [item, setItem] = useState<any>([]);

  useDidShow(() => {
    Taro.onNetworkStatusChange(getNetWorkStatus);
  });
  const getSeriesList = () => {
    seriesListFun({
      brandId: params.brandId,
    }).then((res: any) => {
      setLoadingText('');
      setItem(res);
    });
  };

  useEffect(() => {
    getSeriesList();
  }, []);
  //切换年份
  const handleClick = (value: any) => {
    if (!store.commonStore.networkStatus) {
      Taro.showToast({ title: netWorkErrorInfo, icon: 'none' });
      return;
    }
    //点击已打开的卡片，则关闭掉卡片
    if (value === open) {
      setOpen('-1');
    } else {
      setOpen(value);
    }
  };
  //跳转到雪茄详情
  const gotoDetail = (sku: string) => {
    if (!store.commonStore.networkStatus) {
      Taro.showToast({ title: netWorkErrorInfo, icon: 'none' });
      return;
    }
    Taro.navigateTo({ url: `/subPagesWiki/cigaDetail/index?sku=${sku}` });
  };
  return (
    <View
      className="brand-detail-container"
      style={{ paddingTop: `${store.commonStore.pageAreaTop}rpx` }}
    >
      <TitleBar showLeftBack={true} title="品牌详情" />
      <LoadingSpinner text={loadingText} />
      <View className="brand-detail-banner">
        <View>
          {/* 品牌图片 */}
          <View
            style={{ display: 'flex' }}
            className="brand-detail-banner-content"
          >
            <Image src={item.brandImg} className="brand-img" />
            <View
              style={{ display: 'flex', flexDirection: 'column' }}
              className="brand-name"
            >
              <Text className="brand-name-en">{item.brandNameEn}</Text>
              <Text className="brand-name-zh">{item.brandName}</Text>
            </View>
          </View>
          <View className="brand-intro">
            <Text className="brand-intro-title">品牌介绍</Text>
            <Text className="brand-intro-content">{item.brandIntroduce}</Text>
          </View>
        </View>
      </View>

      {item.seriesList &&
        item.seriesList.map((item: any, index: any) => {
          return (
            <AtAccordion
              open={open === item.id}
              key={item.id}
              onClick={() => handleClick(item.id)}
              title={`${item.seriesName} (${item.productCount})`}
            >
              {item.productList.map((itemNew: any) => {
                return (
                  <BrandItem
                    key={itemNew.sku}
                    data={itemNew}
                    gotoDetail={() => gotoDetail(itemNew.sku)}
                  />
                );
              })}
            </AtAccordion>
          );
        })}
    </View>
  );
};

export default observer(BrandDetail);
